<template>
    <div>
        <h4>发表评论</h4>
        <hr>
        <textarea placeholder="请输入要评论的内容(最多120字)" v-model="postcomment" @keyup.enter="postcomments"></textarea>
        <mt-button type="primary" size="large" @click="postcomments">发表评论</mt-button>
        <div class="com-list" v-for="(item,index) in comments" :key="item.index">
            <div class="com-title">
                第{{ index+1 }}楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户：{{ item.user_name }}&nbsp;&nbsp;&nbsp;&nbsp; 发表时间：{{
                item.add_time | dateFormat }}
            </div>
            <div class="com-body">
                <!-- 三元运算符的嵌套可以解决三种情况的判定 -->
                {{item.content===""?"此用户很懒，什么也没有留下":(item.content==="undefined"?"此用户很懒，什么也没有留下":item.content)}}
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>


<script>
    import {Toast} from "mint-ui";

    export default {
        data() {
            return {
                pageIndex: 1,  //默认展示第一页评论数据
                comments: [],  //评论数组
                postcomment: ''  //发表的评论
            }
        },
        created() {
            this.getcomments();
        },
        methods: {
            getcomments() {
                this.$http.get("api/getcomments/" + this.parentsData + "?pageindex=" + this.pageIndex).then(result => {
                    // console.log(result.body);
                    if (result.body.status == 0) {
                        //为了防止在点击加载更多的时候，新的数据页会将原来的数据业覆盖掉，出现总是只有一页的情况
                        //应该将每次得到的评论页进行拼接
                        this.comments = this.comments.concat(result.body.message);
                    } else {
                        Toast("获取评论失败");
                    }
                })
            },
            getmore() {
                this.pageIndex++;
                this.getcomments();
            },
            postcomments() {
                if (this.postcomment.trim() === "") {
                    return Toast("评论不能为空！");
                }
                this.$http.post("api/postcomment/" + this.parentsData, {
                    pcomment: this.postcomment.trim()
                }).then(function (result) {
                    if (result.body.status === 0) {
                        //手动拼接评论对象，将对象插入到评论数组中的最前面
                        var cmt = {
                            user_name: "匿名用户",
                            add_time: Date.now(),
                            content: this.postcomment.trim()
                        };
                        this.comments.unshift(cmt);
                        this.postcomment = '';
                    }
                })
            }
        },
        props: ['parentsData']   //父组向子组件传值
    }
</script>


<style lang="scss" scoped>
    textarea {
        font-size: 14px;
        height: 85px;
        margin: 0;
    }

    .com-list {
        .com-title {
            font-size: 13px;
            background-color: #ccc;
            line-height: 30px;
            margin: 5px 0;
        }
        .com-body {
            text-indent: 2em;
            line-height: 30px;
        }
    }
</style>